<template>
  <!-- 登录页改 -->
  <div class="login" ref="login">
    <el-row class="content" type="flex" justify="center">
      <el-col :span="12">
        <div class="left-title">信息科技时代</div>
        <div class="left-subhead">智能监测引领时代新潮流</div>
        <img class="login-print" src="../assets/login_images/3x/print-3x.png">
      </el-col>
      <el-col :span="12">
        <div class="right-title">智能监测平台登录页</div>
        <div class="right-subhead">ZHINENGJIANCEPINGTAI</div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
            <h3 class="title">用户登录</h3>

            <el-form-item prop="username">
              <el-input v-model="loginForm.username" class="input-update-element" type="text" auto-complete="off" maxlength="16" placeholder="请输入账号">
                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input v-model="loginForm.password" class="input-update-element" type="password" auto-complete="off" maxlength="16" placeholder="请输入密码" @keyup.enter.native="handleLogin">
                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
              </el-input>
            </el-form-item>

            <el-form-item prop="code">
              <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 50%" @keyup.enter.native="handleLogin"  class="input-update-element">
                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode" />
              </div>
            </el-form-item>

            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
            <el-form-item style="width:100%;">
              <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
      </el-col>
    </el-row>
    <!-- 底部图片 -->
    <div class="login-bottom" ref="loginBottom">
      <img src="../assets/login_images/3x/bottom-3x.png"  ref=""/>
    </div>
  </div>
</template>

<script>
  import { getCodeImg } from "@/api/login";
  import { encrypt, decrypt } from '@/utils/jsencrypt';
  import loginScss from '@/static/css/login.scss';
  import { randomWord, encryption } from '@/api/random.js';

  // const screenheight = screen.height;
  const screenheight = window.innerHeight;

  export default {
    name: "Login",
    data() {
      return {
        codeUrl: "",
        cookiePassword: "",
        loginForm: {
          username: "cmcc",
          password: "Cmcc2020",
          rememberMe: false,
          code: "",
          uuid: ""
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            message: "用户名不能为空"
          }],
          password: [{
            required: true,
            trigger: "blur",
            message: "密码不能为空"
          }],
          code: [{
            required: true,
            trigger: "change",
            message: "验证码不能为空"
          }]
        },
        loading: false,
        redirect: undefined
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.getCode();
      this.getCookie();
    },
    methods: {
      getCode() {
        getCodeImg().then(res => {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }).catch(err => {
        });
      },
      getCookie() {
        const username =  window.localStorage.getItem("loginname");
        const password =  window.localStorage.getItem("password");
        const rememberMe =  window.localStorage.getItem('rememberMe');

        this.loginForm.username = username === null ? this.loginForm.username : username;
        this.loginForm.password = password === null ? this.loginForm.password : decrypt(password);
        this.loginForm.rememberMe = rememberMe === null ? false : Boolean(rememberMe);
      },
      handleLogin() {
        let login = this.loginForm;
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            let username = login.username;
            let password = login.password;

            if (login.rememberMe) {
              window.localStorage.setItem("loginname", username);
              window.localStorage.setItem("password", encrypt(password));
              window.localStorage.setItem("rememberMe", login.rememberMe);
            } else {
              window.localStorage.removeItem("loginname");
              window.localStorage.removeItem("password");
              window.localStorage.removeItem('rememberMe');
            }

            let loginVoucher = {
              username: encryption(username),
              password: encryption(password),
              rememberMe: login.rememberMe,
              code: login.code,
              uuid: login.uuid,
            }

            this.$store.dispatch("Login", loginVoucher).then(() => {
                this.loading = false;
                window.localStorage.setItem("username",encryption(username));
                this.$router.push({
                  path: this.redirect || "/"
                });
              })
              .catch(() => {
                this.loading = false;
                this.getCode();
              });
          }
        });
      },
      // js 控制样式% 比
      changePerCentToPx() {
        let self = this;
        self.$refs.login.style.height = screenheight + "px";

        if (screenheight>810 && screenheight<950) {
          let setBottom = (parseInt(((screenheight-810)/10).toFixed())+4)*(-1);
          self.$refs.loginBottom.style.bottom = setBottom + "%";
          console.log(screenheight,(screenheight-810)/10, setBottom);
        } else if (screenheight>950) {
          let setBottom = (parseInt(((screenheight-950)/10).toFixed()))*(-1);
          self.$refs.loginBottom.style.bottom = setBottom + "%";
          console.log(screenheight,(screenheight-950)/10, setBottom);
        }

        if (screen.width == 1024 && screen.height == 768) {
          self.$refs.loginBottom.style.bottom = -15 + "%";
        } else if (screen.width == 1280 && screen.height == 1024) {
          self.$refs.loginBottom.style.bottom = -20 + "%";
        } else if (screen.width == 1680 && screen.height == 1050) {
          self.$refs.loginBottom.style.bottom = -15 + "%";
        } else if (screen.width == 1024 && screen.height == 600) {
          self.$refs.loginBottom.style.bottom = -5 + "%";
        }
      }
    },
    mounted() {
      this.changePerCentToPx();
    }
  };
</script>
